/***
 * 
 * canvas压缩图片大小和宽高(会失真)
 * 使用方式如下 比如element UI 在图片上传前调用如下方法 将拿到处理之后的值,支持promise:
 * 
 *  // 调入图片缩放的方法
      pressImg({
        file, // 文件流
        width: 142, // 宽
        height: 18, // 高
        success: (resultFile) => { // 返回的函数
          const reader = new FileReader()
          reader.readAsDataURL(resultFile)
          reader.onload = () => {
            const _base64 = reader.result
            this.preview = _base64 //将_base64赋值给图片的src，实现图片预览
          }
        },
      })
 */

function changeFileToBaseURL(file, cb) {
    // 创建读取文件对象
    var fileReader = new FileReader()
    // 读取file文件,得到的结果为base64位
    fileReader.readAsDataURL(file)
  
    fileReader.onload = function() {
      cb && cb(this.result)
    }
  }

  function dataURLtoFile(dataurl, filename) {
    const arr = dataurl.split(',')
    const mime = arr[0].match(/:(.*?);/)[1]
  
    const bstr = window.atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n)
  
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
  
    return new File([u8arr], filename, { type: mime })
  }

  function pressImg(param) {
    param.fileName = param.name || param.file.name
    param.quality = param.quality ? param.quality : 0.92;
    // 得到文件类型
    let fileType = param.file.type;
  
    // 读取file文件,得到的结果为base64位
    changeFileToBaseURL(param.file, base64 => {
      if (base64) {
        var image = new Image()
        image.src = base64
  
        image.onload = function() {
          var canvas = document.createElement('canvas')
          var context = canvas.getContext('2d')
  
          canvas.width = param.width
          canvas.height = param.height
          // 把图片绘制到canvas上面
          context.drawImage(image, 0, 0, canvas.width, canvas.height)
          // 压缩图片，获取到新的base64Url
          var newImageData = canvas.toDataURL(fileType, param.quality)
          // 将base64转化成文件流
          var resultFile = dataURLtoFile(newImageData, param.fileName)
  
          param.success(resultFile)
        }
      }
    })
  }
  
  export {
    pressImg
  }